import React from 'react';
import { Table, Button, Space, Tag, Pagination } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import { Student } from '@/utils/api/student/student';

interface StudentTableProps {
    data: Student[];
    loading: boolean;
    pagination: {
        current: number;
        pageSize: number;
        total: number;
    };
    onTableChange: (page: number, pageSize?: number) => void;
    onDetail: (id: number) => void;
    onEdit: (id: number) => void;
    onEvaluate: (student: Student) => void;
    onExitGroup: (studentId: number, groupId: number) => void;
    onJoinGroup: (id: number) => void;
    onBlackStudent: (student: Student) => void;
    onRemoveFromBlacklist: (studentId: number) => void;
    onDelete: (id: number) => void;
    pageSizeOptions: string[];
    onResetPassword: (studentId: number, studentName: string) => void;
    onOpenDrawer: (student: Student) => void;
}

const StudentTable: React.FC<StudentTableProps> = ({
                                                       data,
                                                       loading,
                                                       pagination,
                                                       onTableChange,
                                                       onOpenDrawer,
                                                       pageSizeOptions
                                                   }) => {
    const columns = [
        {
            title: '序号',
            key: 'index',
            className: 'table-cell',
            align: 'center' as const,
            render: (text: any, record: Student, index: number) => {
                const serialNumber = (pagination.current - 1) * pagination.pageSize + index + 1;
                return serialNumber;
            }
        },
        {
            title: '学号',
            dataIndex: 'studentNumber',
            key: 'studentNumber',
            className: 'table-cell',
            align: 'center' as const,
            render: (studentNumber: string) => studentNumber || '-',
        },
        {
            title: '姓名（年龄）',
            key: 'nameAge',
            className: 'table-cell',
            align: 'center' as const,
            render: (record: Student) => (
                <span>
          {record.name}（{record.age}）
        </span>
            ),
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            className: 'table-cell',
            align: 'center' as const,
            render: (sex: number) => (
                <div style={{ display: 'flex', justifyContent: 'center' }}>
                    <Tag color={sex === 0 ? 'pink' : 'blue'}>
                        {sex === 0 ? '女' : '男'}
                    </Tag>
                </div>
            ),
        },
        {
            title: '年级',
            dataIndex: 'grade',
            key: 'grade',
            className: 'table-cell',
            align: 'center' as const,
            render: (grade: string) => grade ? `${grade}级` : '-',
        },
        {
            title: '院系',
            dataIndex: 'department',
            key: 'department',
            className: 'table-cell',
            align: 'center' as const,
            render: (department: string) => department || '-',
        },
        {
            title: '专业',
            dataIndex: 'major',
            key: 'major',
            className: 'table-cell',
            align: 'center' as const,
            render: (major: string) => major || '-',
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone',
            className: 'table-cell',
            align: 'center' as const,
            render: (phone: string) => phone || '-',
        },
        {
            title: '所在小组',
            key: 'group',
            className: 'table-cell',
            align: 'center' as const,
            render: (_: any, record: Student) => (
                record.groupId ? (
                    <Space>
                        <span>{record.groupName}</span>
                    </Space>
                ) : '无'
            ),
        },
        {
            title: '操作',
            key: 'action',
            className: 'table-cell',
            align: 'center' as const,
            render: (_: any, record: Student) => (
                <Button
                    className="operation-menu-btn"
                    size="small"
                    onClick={() => onOpenDrawer(record)}
                >
                    <SettingOutlined style={{ marginRight: 2 }} />
                    操作菜单
                </Button>
            ),
        },
    ];

    return (
        <>
            <div style={{
                overflowX: 'auto',
                borderRadius: '6px',
                marginBottom: '26px'
            }}>
                <Table<Student>
                    columns={columns}
                    dataSource={data}
                    rowKey="id"
                    pagination={false}
                    loading={loading}
                    style={{ minWidth: '100%' }}
                    scroll={{ y: 500, x: 'max-content' }}
                />
            </div>

            <div style={{
                display: 'flex',
                justifyContent: 'flex-end',
                alignItems: 'center'
            }}>
                <Pagination
                    current={pagination.current}
                    pageSize={pagination.pageSize}
                    total={pagination.total}
                    showSizeChanger
                    pageSizeOptions={pageSizeOptions}
                    showQuickJumper
                    showTotal={(total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条记录`}
                    onChange={onTableChange}
                    onShowSizeChange={onTableChange}
                />
            </div>
        </>
    );
};

export default React.memo(StudentTable);